<template>
    <!-- 头部 -->
    <header class="header">
        <!-- 头部的第一行 -->
        <div class="container">
            <div class="loginList">
                <p>尚品汇欢迎您！</p>
                <p v-if="!token">
                    <span class='suf_space'>请</span>
                    <RouterLink class="suf_space" to="/login">登录</RouterLink>
                    <RouterLink class="register" to="/register">免费注册</RouterLink>
                </p>
                <p v-else>
                    <span class='suf_space'>{{ userInfo?.name }}</span>
                    <button @click="handLogout">退出登录</button>
                </p>
            </div>
            <div class="typeList">
                <a class="suf_space" href="###">我的订单</a>
                <a class="suf_space" href="###">我的购物车</a>
                <a class="suf_space" href="###">我的尚品汇</a>
                <a class="suf_space" href="###">尚品汇会员</a>
                <a class="suf_space" href="###">企业采购</a>
                <a class="suf_space" href="###">关注尚品汇</a>
                <a class="suf_space" href="###">合作招商</a>
                <a href="###">商家后台</a>
            </div>
        </div>
    </header>
</template>

<script lang="ts" name="TopHeader" setup>
import {useUserStore} from "@/stores/user";
import {storeToRefs} from "pinia";

const userStore = useUserStore();

const {userToken: token, userInfo} = storeToRefs(userStore);

const handLogout = userStore.logout;


</script>

<style lang="less" scoped>
.header {
    background-color: #eaeaea;
    height: 30px;
    line-height: 30px;

    .container {
        width: 1200px;
        margin: 0 auto;
        overflow: hidden;

        .loginList {
            float: left;

            p {
                float: left;
                margin-right: 10px;

                .register {
                    border-left: 1px solid #b3aeae;
                    padding: 0 5px;
                    margin-left: 5px;
                }
            }
        }

        .typeList {
            float: right;

            a {
                padding: 0 10px;

                & + a {
                    border-left: 1px solid #b3aeae;
                }
            }
        }
    }
}
</style>